﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>登陆</title>
    <script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
    <script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.23.custom.min.js")"></script>
    <script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <link href="@Url.Content("~/Content/JqueryUIThemes/widget.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/JqueryUIThemes/redmond/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $("#login").dialog({
                modal: true,
                width: 600,
                height: 250,
                autoOpen: true,
                closeOnEscape: false,
                resizable: false,
                position: ["center", "center"],
                draggable: false,
                dialogClass: "login"
            })

            $("#message").dialog({
                modal: true,
                width: 300,
                height: 50,
                autoOpen: false,
                closeOnEscape: false,
                resizable: false,
                position: ["center", "top"],
                draggable: false,
                show: { effect: 'drop', direction: "up" },
                hide: { effect: 'drop', direction: "up" },
                dialogClass: "login"
            })

            $("#imgVerify").click(function () {
                $("#imgVerify").attr("src", "/Account/Image");
            })

            $("#btnLogin").click(function () {
                $("#message").dialog("open");

                var userName = (String)($("#UserName").val());
                if (userName.length < 1) {
                    $("#tips").html("请填写用户名");
                    setTimeout("$('#message').dialog('close')", 800);
                    return false;
                }
                var password = $("#Password").val();
                if (password.length < 1) {
                    $("#tips").html("请填写密码");
                    setTimeout("$('#message').dialog('close')", 800);
                    return false;
                }
                var code = $("#Code").val();
                if (code.length < 1) {
                    $("#tips").html("请填写验证码");
                    setTimeout("$('#message').dialog('close')", 800);
                    return false;
                }
                var role = $("[name='Role']:checked").val();

                if ($("[name='Role']:checked").length < 1) {
                    $("#tips").html("请选择角色");
                    setTimeout("$('#message').dialog('close')", 800);
                    return false;
                }

                $.ajax({
                    url: '/Account/LogIn',
                    type: 'POST',
                    data: { UserName: userName, Password: password, Code: code, Role: role },
                    success: function (data) {
                        $("#imgVerify").attr("src", "/Account/Image");
                        if (data == "-1") {
                            $("#tips").html("验证码错误");
                            setTimeout("$('#message').dialog('close');", 800);
                        }
                        if (data == "1") {
                            $("#tips").html("登陆成功跳转中……");
                            window.location.href = '/MHome/Index';
                        }
                        if (data == "0") {
                            $("#tips").html("用户名或密码错误");
                            setTimeout("$('#message').dialog('close');", 800);
                        }
                        
                    },
                    falure: function () {
                        $("#imgVerify").attr("src", "/Account/Image");
                        $("#tips").html("请求出错");
                        setTimeout("$('#message').dialog('close')", 800);

                    }
                })

            })
        })
    </script>
    <style type="text/css">
      
        .login
        {
        }
        .login .ui-dialog-titlebar-close
        {
            display: none;
        }
        .login .ui-dialog-titlebar
        {
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <form class="cmxform" id="form1" method="post" action="">
        <div id="login" style=" background:#A6C9E2; ">
            <table style="width: 100%;">
                <tr style="width: 100%; height: 100%;">
                    <td style="width: 60%; height: 100%;">
                    </td>
                    <td style="width: 100%; height: 230px; border-left: 1px solid #999999">
                        <table>
                            <tr>
                                <td>
                                    用户名：
                                </td>
                                <td>
                                    <input id="UserName" type="text" style="width: 120px; height: 20px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    密码：
                                </td>
                                <td>
                                    <input id="Password" type="password" style="width: 120px; height: 20px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    验证码：
                                </td>
                                <td>
                                    <input id="Code" type="text" style="width: 45px; height: 20px;" />
                                    
                                        <img id="imgVerify" alt="验证码" src="@Url.Action("Image", "Account")" width="70" height="30" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="radio" name="Role" value="user" />用户
                                </td>
                                <td>
                                    <input type="radio" name="Role" value="management" />系统管理员
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <input id="btnLogin" type="submit" value="登陆" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <div id="message">
            <b id="tips"></b>
        </div>
        </form>
    </div>
</body>
</html>
